<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :fullscreen.sync=fullscreen
    switchFullscreen
    @ok="handleOk"
    :footer="null"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <div style="background: #ececec; padding: 30px">
      <div style="width: 850px;margin: 10px auto;">
        <a-button type="dashed" block @click="addLog()"><a-icon type="plus" />添加日志</a-button>
      </div>
      <a-card style="width: 850px;margin: 10px auto;" v-for="(item,index) in logDataSource" :key="index">
        <a-row :gutter="[16,16]">
          <a-col :span="2">
            <img
              :src="item.avatar"
              style="height: 45px;width: 45px;border-radius: 50%"/>
          </a-col>
          <a-col :span="20" style="padding: 0px;margin: 0px">
            <span>{{item.ghCustomerInfo.name}}</span><br>
            <span style="display:inline-block;color: darkgray;">{{item.createTime}}</span><br>
            <div style="margin-top: 7px;margin-bottom: 7px">{{item.content}}</div>
            <div>{{item.contentProgress}}</div>
            <div v-if="item.imageArr != null" style="margin-top: 5px">
              <img style="width: 100px;height: 100px;margin-right: 10px" @click="handlePreview(img)" :src="getAvatarView(img)" v-for="(img,imgIndex) in item.imageArr">
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleClose">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>
            </div>
            <div style="width: 100%;margin-top: 10px;margin-bottom: 7px;height: 1px;background: lightgrey"></div>
            <div>{{item.progressItemName}}</div>
            <!--评论部分内容，需要通过点击评论显示-->
            <div v-show="item.id == currentLogId && showCommentFlag">
              <div style="margin-top: 7px;width: 100%;height: 1px;background: lightgrey"></div>
              <div style="margin-top: 20px">
                <a-row :gutter="[16,16]">
                  <a-col :span="21">
                    <a-input v-model:value="content" placeholder="请输入内容" />
                  </a-col>
                  <a-col :span="3">
                    <a-button type="primary" @click="saveComment(item.id)">发布</a-button>
                  </a-col>
                </a-row>
                <a-row :gutter="[16,16]" v-for="(comment,index1) in item.commentList" :key="index1">
                  <a-col :span="2">
                    <img
                      :src="comment.avatar"
                      style="height: 45px;width: 45px;border-radius: 50%"/>
                  </a-col>
                  <a-col :span="22">
                    <div>
                      <div style="float:left;">{{comment.createBy}}</div>
                      <div style="float:right;">
                        <a-popconfirm title="确定删除此条评论吗?" @confirm.stop="() => deleteComment(comment.id)">
                          <a><a-icon type="close" /></a>
                        </a-popconfirm>
                      </div>
                    </div><br>
                    <div style="color: darkgray;">{{comment.createTime}}</div>
                    <div style="margin-top: 5px">{{comment.commentContent}}</div>
                    <div style="float: right;margin-top: 5px;width: 100%;height: 1px;background: lightgrey"></div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
          <a-col :span="2">
            <div style="height: 80px">
              <div style="position: absolute;top: 0;right: 0" >
                <a-popconfirm title="确定删除该日志吗?" @confirm.stop="() => deleteLog(item.id)">
                  <a><a-icon type="delete" /></a>
                </a-popconfirm>
                <a-switch size="small" v-model="item.isShow==1?true:false" style="margin-left: 10px;margin-top: -4px" :title="item.isShow == 1?'对业主不展示':'对业主展示'" @change="changeShowComment($event,item)">
                  <a-icon slot="checkedChildren" type="check" />
                  <a-icon slot="unCheckedChildren" type="close" />
                </a-switch>
              </div>
              <div style="position: absolute;bottom: 15px;right: 0" @click="showComment(item.id)"><a><a-icon type="star" /><span style="padding-left: 2px;padding-right: 2px">评论</span><span v-if="item.commentCount >=1">({{item.commentCount}})</span></a></div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <log-add-modal ref="logAddModal" @ok="modalFormOk"></log-add-modal>
  </j-modal>
</template>

<script>

  import {deleteAction, getAction, postAction,putAction,getFileAccessHttpUrl} from "@api/manage";
  import logAddModal from "./logAddModal";

  export default {
    name: "logDetailModal",
    components:{
      logAddModal
    },
    data() {
      return {
        currentItem: {},
        previewVisible: false,
        previewImage: '',
        title: '',
        model:{},
        width: 1000,
        visible: false,
        disableSubmit: false,
        currentCustomerId: 0,
        fullscreen: true,
        switchFullscreen: true,
        currentLogId: 0,    //当前点击评论传过来的日志id，用于判断是否显示，以及用于添加评论，删除评论之后刷新评论数据
        showCommentFlag: false,
        commFlag: false,
        content:'',   //评论的内容
        logDataSource:[], //存放日志数据
        commentDataSource: [],  //存放评论的数据
        url:{
          list: "/ghConstructLog/queryListByCustomerId",
          /*commentList: "/ghConstructLogComment/queryList",*/
          commentAdd: "/ghConstructLogComment/add",
          commentDelete: "/ghConstructLogComment/delete",
          logEdit: "/ghConstructLog/edit",
          logAdd: "/ghConstructLog/add",
          logDelete: "/ghConstructLog/delete"
        },
        menuVisible: false,
        menuStyle: {
          position: "absolute",
          top: "0",
          left: "0",
          border: "1px solid #eee"
        }
      }
    },
    created() {

    },
    methods: {
      async handlePreview(url) {
        this.previewImage = getFileAccessHttpUrl(url);
        this.previewVisible = true;
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      //删除日志
      deleteLog(logId){
        var that = this
        deleteAction(that.url.logDelete, {id: logId }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.initLogData();
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      //添加日志
      addLog(){
        this.$refs.logAddModal.customerId = this.currentCustomerId;
        this.$refs.logAddModal.title = "新增施工日志"
        this.$refs.logAddModal.phone = this.model.phone;
        this.$refs.logAddModal.add(this.currentCustomerId);
      },
      //更改业主显示状态
      changeShowComment(event,item){
        var that = this;
        let params = {};
        params.id = item.id;
        if (event){
          params.isShow = 1;
        }else {
          params.isShow = 0;
        }
        putAction(this.url.logEdit,params).then((res) => {
          if (res.success) {
            this.initLogData()
            that.$message.success(res.message)
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      //发布评论
      saveComment(logId){
        if (this.content == "" || this.content == null){
          this.$message.error("评论内容不能为空")
          return;
        }
        var that = this;
        let params = {};
        params.logId = logId;
        params.commentContent = that.content;
        postAction(that.url.commentAdd,params).then((res) => {
          if (res.success) {
            this.initLogData()
            that.$message.success(res.message)

            that.content = "";
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      //删除评论
      deleteComment(commentId){
        var that = this;
        deleteAction(that.url.commentDelete, {id: commentId}).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            this.initLogData()
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      //显示评论
      showComment(logId){
        if (this.currentLogId == logId){
          if (this.showCommentFlag == true){
            this.showCommentFlag = false;
          }else {
            this.showCommentFlag = true;
          }
        }else if(this.currentLogId != logId){
          this.currentLogId = logId;
          this.showCommentFlag = true;
        }
        //this.commentDataSource = [];
        //this.initCommentData(logId);
      },
      initLogData(){
        var that = this;
        let params = {};
        params.customerId = that.currentCustomerId;
        getAction(that.url.list, params).then((res) => {
          if (res.success) {
            that.logDataSource = res.result
          }
        })
      },
      modalFormOk(){
        this.initLogData();
      },
      edit(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.initLogData();
      },
      close() {
        this.$emit('close');
        this.dataSource = [];
        this.visible = false;
      },
      handleOk() {
        this.$refs.realForm.submitForm();
      },
      submitCallback() {
        this.$emit('ok');
        this.dataSource = [];
        this.visible = false;
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>

</style>